<template>
  <div class="dashboard-enhanced">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card shadow="never" class="welcome-card">
        <div class="welcome-content">
          <div class="welcome-info">
            <h2>欢迎回来，{{ merchantInfo.name }}！</h2>
            <p>今天是 {{ currentDate }}，祝您生意兴隆！</p>
          </div>
          <div class="welcome-actions">
            <el-button type="primary" @click="goToServices">
              <el-icon><Plus /></el-icon>
              发布新服务
            </el-button>
            <el-button @click="goToOrders">
              <el-icon><List /></el-icon>
              查看订单
            </el-button>
          </div>
        </div>
      </el-card>
    </div>



    <!-- 快速操作和待处理事项 -->
    <el-row :gutter="20" class="action-section">
      <!-- 快速操作 -->
      <el-col :span="12">
        <el-card shadow="hover" class="quick-actions-card">
          <template #header>
            <span>快速操作</span>
          </template>
          <div class="quick-actions">
            <div class="action-item" @click="goToServices">
              <div class="action-icon service">
                <el-icon><Plus /></el-icon>
              </div>
              <div class="action-text">服务管理</div>
            </div>
            <div class="action-item" @click="goToOrders">
              <div class="action-icon orders">
                <el-icon><List /></el-icon>
              </div>
              <div class="action-text">订单管理</div>
            </div>
            <div class="action-item" @click="goToFinance">
              <div class="action-icon finance">
                <el-icon><Wallet /></el-icon>
              </div>
              <div class="action-text">财务管理</div>
            </div>
            <div class="action-item" @click="goToReviews">
              <div class="action-icon reviews">
                <el-icon><ChatDotRound /></el-icon>
              </div>
              <div class="action-text">评价管理</div>
            </div>
            <div class="action-item" @click="goToSettings">
              <div class="action-icon settings">
                <el-icon><Setting /></el-icon>
              </div>
              <div class="action-text">商家设置</div>
            </div>
            <div class="action-item" @click="goToStatistics">
              <div class="action-icon statistics">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="action-text">数据统计</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 待处理事项 -->
      <el-col :span="12">
        <el-card shadow="hover" class="pending-tasks-card">
          <template #header>
            <div class="card-header">
              <span>待处理事项</span>
              <el-button type="primary" link @click="goToOrders">查看全部</el-button>
            </div>
          </template>
          <div class="pending-tasks">
            <div 
              v-for="task in pendingTasks" 
              :key="task.type" 
              class="task-item"
              @click="handleTaskClick(task)"
            >
              <div class="task-info">
                <div class="task-label">{{ task.label }}</div>
                <div class="task-desc">{{ task.desc }}</div>
              </div>
              <div class="task-value">
                <el-badge :value="task.count" :hidden="task.count === 0">
                  <span class="task-number">{{ task.count }}</span>
                </el-badge>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 我的服务 -->
    <el-row :gutter="20" class="services-section">
      <el-col :span="24">
        <el-card shadow="hover" class="services-card">
          <template #header>
            <div class="card-header">
              <span>我的服务</span>
              <el-button type="primary" link @click="goToServices">查看全部</el-button>
            </div>
          </template>
          <div class="services-grid">
            <div 
              v-for="service in myServices" 
              :key="service.id" 
              class="service-item"
            >
              <div class="service-header">
                <div class="service-icon" :class="service.iconClass">
                  <el-icon><component :is="service.icon" /></el-icon>
                </div>
                <div class="service-status">
                  <el-tag :type="service.status === 'active' ? 'success' : 'info'" size="small">
                    {{ service.status === 'active' ? '已上架' : '已下架' }}
                  </el-tag>
                </div>
              </div>
              <div class="service-content">
                <h4>{{ service.name }}</h4>
                <p>{{ service.description }}</p>
                <div class="service-price">
                  <span class="price">¥{{ service.price }}</span>
                  <span class="unit">{{ service.unit }}</span>
                </div>
              </div>
              <div class="service-actions">
                <el-button size="small" @click="goToServices">管理</el-button>
                <el-button 
                  size="small" 
                  :type="service.status === 'active' ? 'warning' : 'success'"
                  @click="toggleServiceStatus(service)"
                >
                  {{ service.status === 'active' ? '下架' : '上架' }}
                </el-button>
              </div>
            </div>
            
            <!-- 添加服务卡片 -->
            <div class="service-item add-service" @click="goToServices">
              <div class="add-service-content">
                <el-icon class="add-icon"><Plus /></el-icon>
                <div class="add-text">管理服务</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最近订单 -->
    <el-row :gutter="20" class="recent-orders-section">
      <el-col :span="24">
        <el-card shadow="hover" class="recent-orders-card">
          <template #header>
            <div class="card-header">
              <span>最近订单</span>
              <el-button type="primary" link @click="goToOrders">查看更多</el-button>
            </div>
          </template>
          <el-table :data="recentOrders" style="width: 100%">
            <el-table-column prop="orderNo" label="订单号" width="180" />
            <el-table-column prop="customerName" label="客户" width="120" />
            <el-table-column prop="serviceName" label="服务类型" width="150" />
            <el-table-column prop="amount" label="金额" width="100">
              <template #default="scope">
                <span class="amount">¥{{ scope.row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template #default="scope">
                <el-tag :type="getOrderStatusType(scope.row.status)" size="small">
                  {{ getOrderStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="下单时间" width="180" />
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button type="primary" link size="small" @click="viewOrder(scope.row)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速数据概览 -->
    <el-row :gutter="20" class="quick-overview-section">
      <el-col :span="8">
        <el-card shadow="hover" class="overview-card">
          <div class="overview-content">
            <div class="overview-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-title">今日订单</div>
              <div class="overview-value">{{ overviewData.todayOrders }}单</div>
              <div class="overview-trend">
                <el-icon><ArrowUp /></el-icon>
                <span>{{ overviewData.orderGrowth }}%</span>
              </div>
            </div>
          </div>
          <div class="overview-action">
            <el-button type="primary" link @click="goToStatistics">查看详细统计</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="overview-card">
          <div class="overview-content">
            <div class="overview-icon">
              <el-icon><Wallet /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-title">今日收入</div>
              <div class="overview-value">¥{{ overviewData.todayRevenue }}</div>
              <div class="overview-trend">
                <el-icon><ArrowUp /></el-icon>
                <span>{{ overviewData.revenueGrowth }}%</span>
              </div>
            </div>
          </div>
          <div class="overview-action">
            <el-button type="primary" link @click="goToFinance">查看财务详情</el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover" class="overview-card">
          <div class="overview-content">
            <div class="overview-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="overview-info">
              <div class="overview-title">服务客户</div>
              <div class="overview-value">{{ overviewData.totalCustomers }}人</div>
              <div class="overview-trend">
                <el-icon><ArrowUp /></el-icon>
                <span>{{ overviewData.customerGrowth }}%</span>
              </div>
            </div>
          </div>
          <div class="overview-action">
            <el-button type="primary" link @click="goToStatistics">查看客户分析</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Plus,
  List,
  Wallet,
  ChatDotRound,
  Setting,
  TrendCharts,
  ArrowUp,
  ArrowDown,
  Odometer,
  User,
  Star,
  Timer
} from '@element-plus/icons-vue'
import {
  getDashboardOverview
} from '@/api/dashboard'

const router = useRouter()

// 商家信息
const merchantInfo = reactive({
  name: '测试商户',
  avatar: ''
})

// 当前日期
const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})



// 待处理事项
const pendingTasks = ref([
  {
    type: 'new_orders',
    label: '新订单',
    desc: '待接单处理',
    count: 0
  },
  {
    type: 'pickup_orders',
    label: '待取件',
    desc: '需要上门取件',
    count: 0
  },
  {
    type: 'delivery_orders',
    label: '待配送',
    desc: '清洗完成待配送',
    count: 0
  },
  {
    type: 'reviews',
    label: '待回复评价',
    desc: '客户评价待回复',
    count: 0
  }
])

// 我的服务
const myServices = ref([])

// 最近订单
const recentOrders = ref([])

// 概览数据
const overviewData = reactive({
  todayOrders: 0,
  todayRevenue: 0,
  totalCustomers: 0,
  orderGrowth: 0,
  revenueGrowth: 0,
  customerGrowth: 0
})

// 方法
const toggleServiceStatus = async (service) => {
  try {
    const action = service.status === 'active' ? '下架' : '上架'
    await ElMessageBox.confirm(`确认${action}此服务？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    service.status = service.status === 'active' ? 'inactive' : 'active'
    ElMessage.success(`服务已${action}`)
  } catch {
    ElMessage.info('已取消操作')
  }
}

const handleTaskClick = (task) => {
  switch (task.type) {
    case 'new_orders':
    case 'pickup_orders':
    case 'delivery_orders':
      goToOrders()
      break
    case 'reviews':
      goToReviews()
      break
  }
}

const getOrderStatusType = (status) => {
  const statusMap = {
    'pending': 'warning',
    'accepted': 'primary',
    'picking': 'info',
    'washing': 'success',
    'delivering': 'primary',
    'completed': 'success',
    'cancelled': 'danger'
  }
  return statusMap[status] || 'info'
}

const getOrderStatusText = (status) => {
  const statusMap = {
    'pending': '待接单',
    'accepted': '已接单',
    'picking': '取件中',
    'washing': '清洗中',
    'delivering': '配送中',
    'completed': '已完成',
    'cancelled': '已取消'
  }
  return statusMap[status] || '未知状态'
}

const viewOrder = (order) => {
  router.push(`/main/orders/detail/${order.orderNo}`)
}

// 加载概览数据
const loadOverviewData = async () => {
  try {
    const response = await getDashboardOverview()
    if (response.code === 200) {
      Object.assign(overviewData, response.data)
    }
  } catch (error) {
    console.error('获取概览数据失败:', error)
  }
}



// 导航方法
const goToOrders = () => router.push('/main/orders')
const goToFinance = () => router.push('/main/finance')
const goToReviews = () => router.push('/main/reviews')
const goToServices = () => router.push('/main/services')
const goToSettings = () => router.push('/main/settings')
const goToStatistics = () => router.push('/main/statistics')

// 页面初始化
onMounted(async () => {
  console.log('增强版仪表台已加载')

  // 加载概览数据
  await loadOverviewData()
})
</script>

<style scoped>
.dashboard-enhanced {
  padding: 20px;
  min-height: calc(100vh - 120px);
  background: #f5f7fa;
}

/* 欢迎区域 */
.welcome-section {
  margin-bottom: 20px;
}

.welcome-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.welcome-info h2 {
  color: white;
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.welcome-info p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-size: 14px;
}

.welcome-actions {
  display: flex;
  gap: 12px;
}

.welcome-actions .el-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
}

.welcome-actions .el-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}



/* 操作区域 */
.action-section {
  margin-bottom: 20px;
}

.quick-actions-card,
.pending-tasks-card {
  border-radius: 12px;
  border: none;
  height: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 10px 0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8fafc;
}

.action-item:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 20px;
  color: white;
}

.action-icon.service {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.action-icon.orders {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.action-icon.finance {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.action-icon.reviews {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.action-icon.settings {
  background: linear-gradient(135deg, #fa709a, #fee140);
}

.action-icon.statistics {
  background: linear-gradient(135deg, #a8edea, #fed6e3);
}

.action-text {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.pending-tasks {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.task-item:hover {
  background: #e2e8f0;
}

.task-info {
  flex: 1;
}

.task-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.task-desc {
  font-size: 12px;
  color: #6b7280;
}

.task-value {
  display: flex;
  align-items: center;
}

.task-number {
  font-size: 18px;
  font-weight: bold;
  color: #1f2937;
}

/* 服务区域 */
.services-section {
  margin-bottom: 20px;
}

.services-card {
  border-radius: 12px;
  border: none;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 10px 0;
}

.service-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  background: white;
  transition: all 0.3s ease;
}

.service-item:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.service-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.service-icon.service-laundry {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.service-icon.service-shoes {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.service-icon.service-pet {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.service-icon.service-new {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.service-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #1f2937;
}

.service-content p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
}

.service-price {
  margin-bottom: 16px;
}

.service-price .price {
  font-size: 20px;
  font-weight: bold;
  color: #059669;
}

.service-price .unit {
  font-size: 14px;
  color: #6b7280;
  margin-left: 4px;
}

.service-actions {
  display: flex;
  gap: 8px;
}

.add-service {
  border: 2px dashed #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-service:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.add-service-content {
  text-align: center;
}

.add-icon {
  font-size: 32px;
  color: #9ca3af;
  margin-bottom: 8px;
}

.add-text {
  font-size: 14px;
  color: #6b7280;
}

/* 最近订单 */
.recent-orders-section {
  margin-bottom: 20px;
}

.recent-orders-card {
  border-radius: 12px;
  border: none;
}

.amount {
  color: #059669;
  font-weight: 500;
}

/* 快速概览 */
.quick-overview-section {
  margin-bottom: 20px;
}

.overview-card {
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
}

.overview-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.overview-content {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

.overview-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.overview-info {
  flex: 1;
}

.overview-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.overview-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.overview-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #67c23a;
}

.overview-action {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-enhanced {
    padding: 10px;
  }

  .welcome-content {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }



  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .quick-overview-section {
    flex-direction: column;
  }

  .overview-card {
    margin-bottom: 16px;
  }
}

:deep(.el-card__header) {
  background: #fafbfc;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 12px 12px 0 0;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.welcome-card .el-card__body) {
  padding: 0;
}
</style>
